<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.js"></script>
		<style type="text/css">
			.carousel {
				width: 520px;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<div class="carousel slide" id="demo">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="img/banner01.jpg">
				</div>
				<div class="carousel-item">
					<img src="img/banner02.jpg">
				</div>
				<div class="carousel-item">
					<img src="img/banner03.jpg">
				</div>
			</div>
			<ul class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#demo"></li>
				<li data-slide-to="1" data-target="#demo"></li>
				<li data-slide-to="2" data-target="#demo"></li>
			</ul>
			<a href="#demo" class="carousel-control-prev" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a href="#demo" class="carousel-control-next" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>
		</div>
	</body>

</html>